<%--
  Created by IntelliJ IDEA.
  User: 张洋垠Orange
  Date: 2025/6/3
  Time: 16:08
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-2.0.0.min.js"></script>
<html>
<head>
    <title>Title</title>
</head>
<style>
    html{
        height: 100%;
        font-size: 1rem;
    }
    body{
        width: 100%;
        height: 100%;
        overflow: hidden;
        /*background: linear-gradient(-225deg, #6444ff, #fdff00);*/
        background-size: 200% 100%;
        animation: loopback 10s infinite linear;
        background: url("http://localhost:8080/dhjourney/img/R-C.png") no-repeat;
    }
    @keyframes loopback {
        0%{
            background-position: 0 0;
        }
        50%{
            background-position: 100% 0;
        }
        100%{
            background-position: 0 0;
        }
    }
    *,*:after,*:before{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    body{
        width: 100%;
        height: 100%;
    }
    body,#layout,.title-box,.input-box,.go-add{
        display: flex;
        justify-content: center;
        align-items: center;
    }
    #layout{
        width: 100%;
        height: 100%;
       justify-content: end;
    }
    .login-box{
        background-color: rgba(255,255,255,0.8);
        border: 3px solid black;
        width: 600px;
        height: 400px;
        box-shadow: 0 0 30px white;
        margin-right: 20rem;
    }
    .login-box>div{
        margin-top: 2rem;
    }
    .input-box{
        width: 550px;
        flex-direction: column;
        height: 200px;
        /*border: 1px solid black;*/
    }
    .input-box>div{
        display: flex;
        flex-direction: column;
        align-items: end;
    }
    .input-box-chile{
        margin-top: 1.2rem;
    }
    .input-box-chile>input{
        font-size: 1.2rem;
        width: 240px;
        height: 30px;
        border: 3px solid black;
        margin-left: 0.5rem;
        padding-left: 2px;
    }
    .input-box-button-box{
        width: 300px;
        display: flex;
        justify-content: center;
        margin-top: 3rem;
    }
    .input-box-button-box>button{
        font-size: 1rem;
        width: 242px;
        height: 32px;
        border: 3px black solid;
        background-color: #414141;
        color: gold;
        border-radius: 15px;
        transition: 200ms;
    }
    .input-box-button-box>button:hover{
        transform: scale(0.9);
        opacity: 0.8;
    }
    .go-add{
        width: 100%;
        justify-content: end;
    }
    .go-add>a{
        text-decoration: none;
        margin-right: 1rem;
        color: #000000;
    }
    .go-add>a:hover{
        margin-right: 1rem;
        color: #7d7d7d;
    }
    .img-gun{
        border: 5px solid #323232;
        width: 300px;
        height: 100%;
        margin-right: auto;
        background-color: rgba(0,0,0,0.5);
        overflow: hidden;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 2rem;
    }
    .imgs-box{
        width: 180px;
        height: 180px;
        /*border: 1px solid white;*/
    }
</style>
<body>
    <div id="layout">
        <div class="img-gun">
            <div class="imgs-box" style="margin-bottom: auto"><img src="./img/钟表小子.png" width="100%" alt=""></div>
            <div class="imgs-box"><img src="./img/钟表小子.png" width="100%" alt=""></div>
            <div class="imgs-box" style="margin-top: auto"><img src="./img/钟表小子.png" width="100%" alt=""></div>
        </div>
        <div class="login-box">
            <div class="title-box">
                <h1>hello!welcome!</h1>
            </div>
            <div class="input-box">
                <div>
                    <div class="input-box-chile"><span>手机号:</span><input type="text"></div>
                    <div class="input-box-chile"><span>密码:</span><input type="password"></div>
                </div>
                <div class="input-box-button-box">
                    <button><span style="font-size: 1rem">立即登录</span></button>
                </div>
            </div>
            <div class="go-add">
                <a href="TestServlet">没有账号?立即注册!</a>
            </div>
        </div>
    </div>
</body>
<script>

</script>
</html>
